<template>
	<h1>这是Home组件</h1>
	<h4>num:{{num}}</h4>
	<button @click="stop">停用侦听器</button>
</template>

<script>
	import {ref,reactive,toRefs,watchEffect} from 'vue'
	export default{
		setup(props,context){//composition API的入口
		
			const num = ref(0)
			const str = ref("aaa")
			
			/* watchEffect是立即执行的 没有immediate
				watchEffect不需要传递参数 自动会感知代码的依赖 只需要一个回调函数
				不能获取之前的值
				
				如果需要停用侦听器:可以回调这个侦听器函数
			 */
			const stop =  watchEffect(()=>{
				console.log("num:",num.value)
				console.log("str:",str.value)
			})
			
			setInterval(()=>{
				num.value++;
			},1000)
			
			return{
				num,stop
			}
		}
	}
</script>

<style scoped>
a {
  color: #42b983;
}
button{
	margin-left: 10px;
}
</style>